<template>
  <div class="box" @touchmove.prevent>
    <!-- 背景开始已登录 -->
    <div class="beijin" ref='photo'>
      <div class="login">
        <div>
          <img
            class="boddha"
            src="http://liufusong.top:8080/img/profile/avatar.png"
            alt=""
          />
        </div>
        <!-- 用户信息已登录 -->
        <div class="xinxi" v-if="token">
          <span>{{ user.nickname }}</span>
          <div class="layout" @click="layout">退出</div>
          <div class="person">
            编辑个人资料
            <i class="iconfont icon-right-s"></i>
          </div>
        </div>
        <!-- 用户信息结束 -->
        <!-- 用户信息未登录 -->
        <div class="xinxi" v-else>
          <span class='youke'>游客</span>
          <div class="layout" @click="Userlogin">去登录</div>
        </div>
        <!-- 用户信息结束 -->
      </div>
    </div>
    <!-- 背景结束 -->
    <div class="content">
      <div class="a collectFn" @click='collectFn'>
        <i class="iconfont icon-shoucang"></i>
        <span>我的收藏</span>
      </div>
      <div class="a MyrentFn" @click='MyrentFn'>
        <i class="iconfont icon-home"></i>
        <span>我的出租</span>
      </div>
      <div class="a">
        <i class="iconfont icon-shijian"></i>
        <span>看房记录</span>
      </div>
      <div class="a">
        <i class="iconfont icon-zhanghu"></i>
        <span>成为房主</span>
      </div>
      <div class="a">
        <i class="iconfont icon-31wode"></i>
        <span>个人资料</span>
      </div>
      <div class="a">
        <i class="iconfont icon-kefu"></i>
        <span>联系我们</span>
      </div>
    </div>
    <div class="footer">
      <img
        class="dibu"
        src="http://liufusong.top:8080/img/profile/join.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/storage'
import { getUserInfo } from '@/api/user'
export default {
  name: 'MyPage',
  data () {
    return {
      token: '',
      user: ''
    }
  },
  async created () {
    const token = getToken()
    this.token = token
    const res = await getUserInfo({})
    // console.log(res)
    // console.log(res.body)
    this.user = res.body
    this.$refs.photo.style.backgroundImage = " url('http://liufusong.top:8080/img/profile/bg.png')"
  },
  methods: {
    layout () {
      this.$router.push('/login')
    },
    Userlogin () {
      this.$router.push('/login')
    },
    collectFn () {
      this.$router.push('/collect')
    },
    MyrentFn () {
      this.$router.push('/MyRent')
    }
  }
}
</script>

<style>
.box {
  padding: 10px;
}
.beijin {
  position: relative;
  background-image: url("http://liufusong.top:8080/img/avatar.png");
  height: 350px;
  background-repeat: no-repeat;
  background-size: 350px;
}
.login {
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 200px;
  background-color: #fff;
  align-content: center;
  margin: 0 26px;
  position: absolute;
  box-shadow: 0 0 10px 3px #ddd;
}
.boddha {
  width: 80px;
  height: 80px;
  position: absolute;
  left: 110px;
  top: -40px;
}
img {
  height: 300px;
}
.a {
  width: 25%;
  height: 65px;
  padding-top: 30px;
  padding-left: 20px;
}
.content {
  display: flex;
  flex-wrap: wrap;
}
.iconfont {
  display: flex;
  text-align: center;
  padding-left: 25px;
  padding-bottom: 8px;
}
.footer {
  height: 90px;
  margin: 5px;
}
.dibu {
  height: 100px;
  width: 350px;
}
.layout {
  width: 50px;
  /* height: 10px; */
  text-align: center;
  background: #21b97a;
  border-radius: 30px;
  margin-left: 15px;
  margin-top: 10px;
}
.xinxi {
  position: absolute;
  top: 60px;
  left: 110px;
}
.person {
  color: #999;
  padding-top: 20px;
}
.icon-right-s {
  width: 10px;
  height: 10px;
  color: #999;
  float: right;
}
.youke{
  margin-left: 20px;
}
</style>
